<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <span>{{show()}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

let vm = new Vue({
    el:"#app",
    data:{
        xyjPrice: 99.98,
        syjnum:1
    },
    methods:{
        show(){
            return this.syjnum
        }
    },
    beforeCreate(){
        console.log("_____________beforeCreate");
        console.log("数据模型未加载："+ this.syjnum)
        console.log("方法未加载："+this.show());
        console.log("html模板未加载："+document.getElementById("app"));
    },
    created: function () {
        console.log("______________created");
        console.log("数据模型已经加载："+this.syjnum);
        console.log("方法已加载："+this.show())
        console.log("html模板已加载："+document.getElementById("app"));
        console.log("html模板为渲染："+document.getElementById("app").innerText);
    },
    breforeMount(){
        console.log("______________beforeMount");
        console.log("html模板未渲染："+document.getElementById("app").innerText)
    },
    mounted(){
        console.log("______________mounted");
        console.log("html模板已渲染："+document.getElementById("app").innerText)
    },
    beforeUpdate(){
        console.log("______________beforeUpdate")
        console.log("数据模型已经更新："+this.xyjPrice)
        console.log("html未更新："+document.getElementById("app").innerText)
    },
    updated:function(){
        console.log("______________updated")
        console.log("数据模型已经更新："+this.xyjPrice)
        console.log("html已经跟新："+document.getElementById("app").innerText)
    }
})

</script>
</body>
</html>
